<template>
  <el-form :model="models" :rules="rules" ref="qmGenForm" label-width="140px" class="qm-gen-form">
    <el-row>
      <el-col :span="12">
        <el-form-item label="App编码：" prop="model.appCode">
          <el-input v-model="models.model.appCode" :disabled="pageAction != 'create'"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="App名称：" prop="model.appName">
          <el-input v-model="models.model.appName"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="英文名称：" prop="model.appEnglishName">
          <el-input v-model="models.model.appEnglishName"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="应用官网：" prop="model.appUrl">
          <el-input v-model="models.model.appUrl"></el-input>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="12">
        <el-form-item label="是否强制绑定设备：" prop="model.isForceBind">
          <el-switch v-model="models.model.isForceBind"></el-switch>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="最大绑定设备数：" prop="model.maxBindNum">
          <el-input-number v-model="models.model.maxBindNum"></el-input-number>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="24">
        <el-form-item label="包名：" prop="model.packageName">
          <el-input v-model="models.model.packageName" placeholder="例如：com.championsoft.qmapp"></el-input>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="12">
        <el-form-item label="关键词：" prop="model.keyword">
          <el-input v-model="models.model.keyword"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="宣传文本：" prop="model.publicMemo">
          <el-input v-model="models.model.publicMemo"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="隐私政策链接：" prop="model.secretUrl">
          <el-input v-model="models.model.secretUrl"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="技术支持链接：" prop="model.techSupportUrl">
          <el-input v-model="models.model.techSupportUrl"></el-input>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="12">
        <el-form-item label="中文简介：" prop="model.chineseMemo">
          <el-input type="textarea" v-model="models.model.chineseMemo"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="英文简介：" prop="model.englishMemo">
          <el-input type="textarea" v-model="models.model.englishMemo"></el-input>
        </el-form-item>
      </el-col>
    </el-row>

    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>APP参数设置</span>
        <el-button style="float: right; padding: 3px 0" type="text" @click="addParameter">新增</el-button>
      </div>

      <qm-table
        :data="{ data: models.parameters }"
        :showCheckbox="false"
        :showToolbar="false"
        :menuOptions="{ width: 80 }"
      >
        <qm-table-column field="code">
          编码
          <template #content="{ row }">
            <el-input v-model="row.code"></el-input>
          </template>
        </qm-table-column>
        <qm-table-column field="name">
          参数名称
          <template #content="{ row }">
            <el-input v-model="row.name"></el-input>
          </template>
        </qm-table-column>
        <qm-table-column field="value">
          参数值
          <template #content="{ row }">
            <el-input v-model="row.value"></el-input>
          </template>
        </qm-table-column>
        <qm-table-column field="isPublic">
          是否公开
          <template #content="{ row }">
            <el-switch v-model="row.isPublic" :active-value="1" :inactive-value="0"></el-switch>
          </template>
        </qm-table-column>
        <qm-table-column field="memo">
          备注
          <template #content="{ row }">
            <el-input v-model="row.memo"></el-input>
          </template>
        </qm-table-column>

        <template v-slot:moreBtn="{ row }">
          <el-button type="text" @click="removeParameter(row)">删除</el-button>
        </template>
      </qm-table>
    </el-card>

    <el-row style="margin-top: 20px;">
      <el-col :span="24" style="text-align: right;">
        <el-button @click="save" size="medium" type="primary">保 存</el-button>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
import _ from "lodash";
import request from "@/utils/request";
export default {
  name: "mobile-mobileApp-create",
  props: {
    models: Object,
    controlData: Object,
    pageAction: String,
  },
  data() {
    return {
      rules: {
        model: {
          appCode: [
            {
              required: true,
              message: "这是必填字段",
              trigger: "blur",
            },
          ],
          appName: [
            {
              required: true,
              message: "这是必填字段",
              trigger: "blur",
            },
          ],
          packageName: [
            {
              required: true,
              message: "这是必填字段",
              trigger: "blur",
            },
          ],
        },
        // "model.appCode": [
        //   {
        //     required: true,
        //     message: "这是必填字段",
        //     trigger: "blur",
        //   },
        // ],
        // "model.appName": [
        //   {
        //     required: true,
        //     message: "这是必填字段",
        //     trigger: "blur",
        //   },
        // ],
        // "model.packageName": [
        //   {
        //     required: true,
        //     message: "这是必填字段",
        //     trigger: "blur",
        //   },
        // ],
      },
    };
  },
  methods: {
    addParameter() {
      this.models.parameters.push(_.extend({}, this.controlData.parameter));
    },
    removeParameter(d) {
      this.models.parameters.remove(d);
    },
    save() {
      this.$refs["qmGenForm"].validate((valid) => {
        if (valid) {
          let postModels = _.cloneDeep(this.models);
          postModels.pageAction = this.pageAction;
          let appId = postModels.model.appId;
          let url = `/mobile/mobileApp/save?appId=${appId}`;
          request
            .post(url, postModels)
            .then((r) => {
              if (r && r.success) {
                this.notifySuccess(r.message || "保存成功");
              } else {
                this.notifyError(r.message || "保存失败");
              }
            })
            .catch((r) => {
              this.notifyError((r || {}).message || "保存失败");
            });
        }
      });
    },
  },
};
</script>

<style scoped>
</style>